<!DOCTYPE html>
<html>
<head>
<title>TXT小说下载</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
<style>
body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  background-color: #f4f4f4;
}

.container {
  max-width: 800px;
  margin: auto;
  padding: 20px;
}

h2 {
  color: #333;
}

form {
  background-color: #fff;
  padding: 20px;
  border-radius: 5px;
}

label, select, input[type="text"], input[type="submit"] {
  display: block;
  margin-bottom: 20px;
}

input[type="submit"] {
  background-color: #333;
  color: #fff;
  border: none;
  padding: 10px;
  cursor: pointer;
}

input[type="submit"]:hover {
  background-color: #444;
}

footer {
  background-color: #333;
  color: #fff;
  text-align: center;
  padding: 20px;
}
.result {
  background-color: #d6d6d6;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 20px;
  padding-right: 20px;
  border-radius: 5px;
  margin-top: 20px;
}
.hidden {
  display: none;
}
</style>
</head>
<body>

<div class="container">
<h2>TXT小说下载</h2>

<form id="apiForm">
  <p>版本：2.1.0</p>
  <label for="url">API:</label><br>
  <select id="urlSelect" name="urlSelect" onchange="urlChange()">
    <!--<option value="https://apif.shingyu.me:5000/api">（番茄）官方测试API：apif.shingyu.me</option>
    <option value="https://api7.shingyu.me:5001/api">（七猫）官方测试API：api7.shingyu.me</option>-->
    <option value="https://cy.shingyu.me:5000/api">（番茄）臭鼬提供API：118.195.158.24</option>
<!--    <option value="http://118.195.158.24:5001/api">（七猫）臭鼬提供API：118.195.158.24</option>-->
    <option value="https://yc.shingyu.me:5000/api">（暂时不提供服务）臭鼬提供API2</option>
<!--    <option value="http://123.249.105.141:5001/api">（番茄）臭鼬提供API2：123.249.105.141</option>-->
<!--    <option value="http://119.91.152.187:5000/api">鑫 提供API：119.91.152.187</option>-->
    <option value="http://localhost:5000/api">本地API：localhost</option>
    <option value="custom">自定义</option>
    <!-- 在这里添加更多的选项 -->
  </select><br>
  <input type="text" id="url" name="url" style="display:none;" placeholder="请输入自定义API地址">
  <label for="class">类别:</label><br>
  <select id="class" name="class">
    <option value="add">添加</option>
    <option value="query">查询</option>
    <!-- 在这里添加更多的选项 -->
  </select><br>
  <label for="id">书籍ID（或链接、分享链接）:</label><br>
  <input type="text" id="id" name="id"><br>
  <input type="submit" value="提交">
  <div id='output' class="result hidden">
    <p><b>结果:</b></p>
    <p id="result"></p>
  </div>
</form>

<!-- <p id="result"></p> -->
<p style="color:orange">如果你使用了官方测试的七猫API，失败时，请尝试使用流量</p>
<p>此页面是番茄小说下载项目API模式的调用实例<br>（官方测试API和其它API除下载地址不同没有任何区别）</p>
<p>项目地址：https://github.com/xing-yv/fanqie-novel-download<br>Gitee：https://gitee.com/xingyv1024/fanqie-novel-download</p>
<p>使用教程：<br>1.在API URL里填入你获取或自建的API地址<br>2.选择是添加下载列表还是查询下载状态<br>3.在书籍ID里填入你要下载或查询的书籍的ID（如何获取见下文），或者链接、分享链接<br>4.点击“提交”，等待API服务告诉你是否添加至下载列表或者查询到的信息<br>5.获取下载好的书籍（见下文）</p>

<div>
<p>如何获取书籍ID：</p>
<p>番茄：<br>
电脑端：<br>在书籍目录页复制网址<br>网址中“/page/”后的一串数字即为书籍ID（问号前）<br>
手机端：<br>分享书籍并复制链接<br>链接中“book_id=”后的一串数字即为书籍ID<br>（番茄已支持直接输入链接）</p>

<p>七猫：<br>
电脑端：<br>在书籍目录页复制网址<br>网址中“/shuku/”后的一串即为书籍ID（最后的/前）<br>
手机端：<br>分享书籍并复制链接<br>链接中最后的一串数字即为书籍ID<br>（七猫已支持直接输入链接）
</p>
</div>

<p>如何获取下载好的文件：</p>
<p id="selectedUrl" ></p>

<footer>
<p>© 2023 星隅 (xing-yv, shingyu). 版权所有。</p>
</footer>

<script>
  function urlChange() {
    var select = document.getElementById('urlSelect');
    var input = document.getElementById('url');
    var p = document.getElementById('selectedUrl');
    switch(select.value) {
    case 'https://apif.shingyu.me:5000/api':
      input.style.display = 'none';
      input.value = select.value;
      p.innerHTML = '您选择了“官方测试番茄API”，请到 <a href="https://dl.shingyu.me:6250">https://dl.shingyu.me:6250</a> 下载';
      break;
     case 'https://api7.shingyu.me:5001/api':
      input.style.display = 'none';
      input.value = select.value;
      p.innerHTML = '您选择了“官方测试七猫API”，暂时请到 <a href="https://api7.shingyu.me:5001/list">https://api7.shingyu.me:5001/list</a> 下载';
      break;
    case 'https://cy.shingyu.me:5000/api':
      input.style.display = 'none';
      input.value = select.value;
      p.innerHTML = '您选择了 @臭鼬 提供的API，请到 <a href="https://dl.shingyu.me:6250">https://dl.shingyu.me:6250</a> 下载<br>咨询QQ群：876732820';
      break;
     case 'https://yc.shingyu.me:5000/api':
      input.style.display = 'none';
      input.value = select.value;
      p.innerHTML = '您选择了 @臭鼬 提供的第二个API，请到 <a href="https://dl.shingyu.me:6250">https://dl.shingyu.me:6250</a> 下载<br>咨询QQ群：876732820';
      break;
// <!--    case 'http://119.91.152.187:5000/api':-->
// <!--      input.style.display = 'none';-->
// <!--      input.value = select.value;-->
// <!--      p.innerHTML = '您选择了 @鑫 提供的API，请到 <a href="https://fanqie.thinkzyx.cn/">https://fanqie.thinkzyx.cn/</a> 下载';-->
// <!--      break;-->
    case 'http://localhost:5000/api':
      input.style.display = 'none';
      input.value = select.value;
      p.innerHTML = '您选择了“本地API”，请到API程序文件夹下output文件夹中寻找';
      break;
    case 'custom':
      input.style.display = 'block';
      input.value = ''; // 将输入框的值设置为空字符串
      p.innerHTML = '您选择了自定义API：<br>如果您使用别人提供的API：请向提供者咨询<br>如果您自建API，请到API程序文件夹下output文件夹中寻找';
      break;
    // 在这里添加更多的选项
    default:
      input.style.display = 'none';
      input.value = select.value;
      p.innerHTML = '如果您使用别人提供的API：请向提供者咨询<br>如果您自建API，请到API程序文件夹下output文件夹中寻找' ;
  }
  }
  </script>

<script>
  document.getElementById("apiForm").addEventListener("submit", function(event){
   event.preventDefault()

   var url = document.getElementById('url').value;

   var data = {
     action: document.getElementById('class').value,
     id: document.getElementById('id').value
   };

   var requestClass = data.action; // 存储请求中的class字段

   console.log("发送的数据：", data);

   fetch(url, {
     method: 'POST',
     headers: {
       'Content-Type': 'application/json'
     },
     body: JSON.stringify(data)
   })
   .then(response => {
    if (!response.ok) {
    // 如果发生错误，获取响应的文本
    return response.text().then(errorText => {
      throw new Error('HTTP error ' + response.status + ', ' + errorText);
    });
  }
     console.log("收到的响应：", response);
     return response.json();
   })
   .then(data => {
     console.log("解析后的数据：", data);

     var resultText = '';
     if (data.error) {
        resultText = '错误：' + data.error;
      } else if (requestClass == 'add') { // 使用存储的requestClass变量
        resultText = '消息：' + data.message + '<br>' +
                      (data.position ? ('位置：' + data.position + '<br>') : '') +
                      (data.status ? ('状态：' + data.status) : '');
      } else if (requestClass == 'query') { // 使用存储的requestClass变量
        resultText = '存在：' + (data.exists ? '是' : '否') + '<br>' +
                      (data.position ? ('位置：' + data.position + '<br>') : '') +
                      (data.status ? ('状态：' + data.status) : '');
      }


     console.log("显示的结果：", resultText);
     document.getElementById('output').classList.remove('hidden');
     document.getElementById('result').innerHTML = resultText;
   })
   .catch((error) => {
  console.error('Error:', error);
  document.getElementById('output').classList.remove('hidden');
  document.getElementById('result').innerHTML = 'Error: ' + error.message;
});
 });

 window.onload = function() {
  urlChange();
}

  </script>


</div>

</body>
</html>
